<template>
	<view class="login">
		<view class="bg"></view>
		<view class="form_box">
			<view class="form_bo_wrap">
				<u-subsection :list="userList" :current="curNow" @change="sectionChange" class="user"></u-subsection>

				<view class="Editorial">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
						<u-form-item label="头像" borderBottom ref="item1" labelWidth="80">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="1"></u-upload>
						</u-form-item>

						<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.name" placeholder="请设置姓名" border="none"></u--input>
						</u-form-item>

						<u-form-item label="用户名" prop="userInfo.userName" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.userName" placeholder="请设置用户名" border="none"></u--input>
						</u-form-item>

						<u-form-item label="登录密码" prop="userInfo.password" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.password" type="password" placeholder="请设置登录密码" border="none"></u--input>
						</u-form-item>

						<u-form-item label="性别" prop="gender" borderBottom ref="item2" labelWidth="80">
							<u-radio-group v-model="model1.userInfo.gender">
								<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in radiolist1" :key="index"
									:label="item.name" :name="item.value">
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="手机号" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.concatNumber" placeholder="请输入手机号" border="none"></u--input>
						</u-form-item>
						<u-form-item label="住址" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.address" placeholder="请输入住址" border="none"></u--input>
						</u-form-item>

						<u-form-item label="年龄" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.age" placeholder="请输入年龄" border="none"></u--input>
						</u-form-item>

						<u-form-item label="身份证号码" borderBottom ref="item1" labelWidth="80" v-if="curNow == 1">
							<u--input v-model="model1.userInfo.idNumber" placeholder="请输入身份证号码" border="none"></u--input>
						</u-form-item>

						<u-form-item label="个人介绍" borderBottom ref="item1" labelWidth="80" v-if="curNow == 0">
							<u--textarea placeholder="请输入个人介绍" v-model="model1.description" count></u--textarea>
						</u-form-item>
					</u--form>
					<u-button type="primary" text="提交" class="submit" @click="registerAndLogin"></u-button>
				</view>
			</view>
		</view>

		<back></back>
	</view>
</template>

<script>
import {doRegistry} from '../../common/api'
import zlxlsUploadImg from "@/components/zlxls-upload-img/zlxls-upload-img.vue"
import { effectScope } from 'vue'
export default {
	components:{ zlxlsUploadImg },
	data() {
		return {
			userList: ['教练员', '学员'],
			curNow: 0,
			model1: {
				userInfo: {
					name: '', //姓名
					userName: '', //用户名
					password: '', //密码
					age: '', //年龄
					concatNumber: '', // 手机号
					address: '', //住址
					idNumber: '', //身份证号码
					description: '', //个人介绍
					gender: 0,
					avatar: '', //头像
				},
				
			},
			showSex: false,
			radiolist1: [
				{
					name: '男',
					value: 0
				},
				{
					name: '女',
					value: 1
				}
			],
			fileList1: [], //头像
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请输入账号',
					trigger: ['blur', 'change']
				},
				'userInfo.userName': {
					type: 'string',
					required: true,
					message: '请输入账号',
					trigger: ['blur', 'change']
				},
				'userInfo.psw': {
					type: 'string',
					required: true,
					message: '请输入密码',
					trigger: ['blur', 'change']
				},
			},
			cover: '', // 图片
			upPicUrl: 'http://c4wtzd.natappfree.cc/font/common/v1/upload', // 上传图片域名
			imgList1:[],
			imgList2:[],
			header:{},
			params: {
					cover:'',
					slider:'',
			}
		}
	},
	onLoad() {
				
	},
	methods: {
		// 注册
		async registerAndLogin(){
			if(this.curNow == 0){
				this.model1.userInfo.userType = 'coach'
			} else {
				this.model1.userInfo.userType = 'trainee'
			}
			let res = await doRegistry(this.model1.userInfo)
			console.log(res, 1111);
			
				uni.navigateTo({
					url: '/pages/register/register'
				});
			
		},
		sectionChange(index) {
			this.curNow = index;
		},
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1.validate().then(res => {
				uni.$u.toast('注册成功')
			}).catch(errors => {
				uni.$u.toast('注册失败')
			})
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			const app = getApp();
			console.log(app.globalData.uploadUrl, 3344);
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: app.globalData.uploadUrl +'font/common/v1/upload',
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						this.model1.userInfo.avatar = data.url
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.login {
	.bg {
		width: 100%;
		height: 400rpx;
		background: url('../../static/images/dcjx.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.form_box {
		width: 100%;
		position: absolute;
		top: 200rpx;

		.form_bo_wrap {
			width: 640rpx;
			margin: 0 auto;
			padding: 32rpx;
			box-shadow: 0px 0px 5px #333333;
			border-radius: 20rpx;
			background: #fff;

			.user {
				margin-bottom: 20rpx;
			}
			
			.Editorial {
				height: 700rpx;
				overflow: auto;
				.add-cover {
					width: 150rpx;
					height: 150rpx;
					.add-icon {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}
		}
	}

	.enroll {
		font-size: $uni-font-size-mini;
		margin-top: 10rpx;
	}

	.forget {
		font-size: $uni-font-size-mini;
		color: $uni-color-type1;
		text-align: right;
		margin: 20rpx 0 20rpx;
	}

	.submit {
		margin: 32rpx 0 60rpx 0;
	}
}
</style>
